<template>
	<view>
		<view v-if="showTime" style="display: flex;justify-content: center;">请选择时间区间</view>
		<view v-if="showTime" style="display: inline-block; display: flex;justify-content: center;font-size: larger;">
			<picker style="display: inline-block;font-size: larger;" mode="date" :value="sDate" :start="startDate" :end="endDate" @change="bindDateChange">
				  {{sDate}}
			</picker>~
			<picker style="display: inline-block;font-size: larger;" mode="date" :value="eDate" :start="startDate" :end="endDate" @change="bindDateChange1">
			     {{eDate}}
			</picker>
		</view>
		<view style="height: 50rpx;"></view>
		<view class="wrap" v-if="showTable">
			<view class="box">
				<t-table>
					<t-tr>
						<t-td>开始时间</t-td>
						<t-td>课程名</t-td>
						<t-td></t-td>
					</t-tr>
					<t-tr v-for="(course,index) in courseList" :key="index">
						<t-td>{{course.starttime}}</t-td>
						<t-td>{{course.curseName}}</t-td>
						<t-td style="text-decoration: underline;" @tap="findCurseByCurseId(course.curseId)">课程详情</t-td>
					</t-tr>
				</t-table>
			</view>
		</view>
		<view  style="display: flex;justify-content: center;" v-if="!showTable">查询结果为空</view>
	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import base from '@/common/base.js'
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				sDate:currentDate,
				eDate:currentDate,
				courseList: [],
				/* 窗口尺寸 */
				winSize: {},
				/* 显示遮罩 */
				showShade: false,
				/* 显示操作弹窗 */
				showPop: false,
				/* 弹窗定位样式 */
				popStyle: "",
				/* 选择的用户下标 */
				pickerUserIndex: -1,
				showTable:true,
				showTime:true
			}
		},
		onLoad() {
			this.getCourseData();
			this.getWindowSize();

			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
			findCurseByCurseId(curseId){
				uni.navigateTo({
					url:"/pages/user/course/showCurseDetail?curseId="+curseId
				})
			},
			getCourseData() {
				uni.request({
					url:base.urlPrefix+"yoga_app/curse/coachGetHistoryCurse",
					data:{
						coachId:base.coach.coachId
					},
					success: (res) => {
						if(res.data.code=="success"){
							this.courseList = res.data.list;
						}else{
							this.showTable=false;
							this.showTime=false;
						}
					}
				})
			},
			findHistoryCurseByTime(){
				uni.request({
					url:base.urlPrefix+"yoga_app/curse/coachGetHistoryCurseByTime",
					data:{
						coachId:base.coach.coachId,
						startTime:this.sDate,
						endTime:this.eDate
					},
					success: (res) => {
						if(res.data.code=="success"){
							this.showTable=true;
							this.courseList = res.data.list;
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.message
							})
							this.showTable=false;
						}
					}
				})
			},
			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},
			/* 长按监听 */
			onLongPress(e) {
				let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index];

				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > (this.winSize.height / 2)) {
					style = `bottom:${this.winSize.height-touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > (this.winSize.witdh / 2)) {
					style += `right:${this.winSize.witdh-touches.clientX}px`;
				} else {
					style += `left:${touches.clientX}px`;
				}

				this.popStyle = style;
				this.pickerUserIndex = Number(index);
				this.showShade = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPop = true;
					}, 10);
				});
			},
			/* 隐藏弹窗 */
			hidePop() {
				this.showPop = false;
				this.pickerUserIndex = -1;
				setTimeout(() => {
					this.showShade = false;
				}, 250);
			},
			/* 选择菜单 */
			pickerMenu(e) {
				let index = Number(e.currentTarget.dataset.index);
				console.log(`第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`);
				// 在这里开启你的代码秀

				uni.showToast({
					title: `第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`,
					icon: "none",
					mask: true,
					duration: 600
				});

				/* 
				 因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
				 如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
				 */
				this.hidePop();
			},
			bindDateChange: function(e) {
				this.sDate = e.target.value
				this.findHistoryCurseByTime();
			},
			bindDateChange1: function(e) {
				this.eDate = e.target.value
				this.findHistoryCurseByTime();
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			         year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
